<template>
  <view class="list-container">
    <view class="list">
      <view
        class="item-container"
        v-for="carNumber in carNumberList"
        :key="carNumber.id"
        @click="toPayPage(carNumber.id)"
      >
        <view class="title-container">
          <view class="title">{{ carNumber.name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      carNumberList: [],
      carNumber: ""
    };
  },
  onLoad(options: any) {
    this.carNumber = options.carNumber
  },
  mounted() {
    this.getCarNumberList();
  },
  methods: {
    getCarNumberList() {
      this.$mainApi.apiAllParkInfo().then((res) => {
        this.carNumberList = res.data.records;
      });
    },
    toEditPage(id: any) {
      location.href = "/#/pages/parking/plate?id=" + id;
    },
    deleteCarNumber(id: any) {
      uni.showModal({
        title: "删除车牌号",
        content: "确认删除车牌号码，此操作不可逆",
        success: (result: UniApp.ShowModalRes) => {
          if (result.confirm) {
            uni.showToast({ title: "正在删除车牌号" });
            this.$mainApi.apiDeleteCarNumber(id).then(() => {
              uni.hideToast();
              this.getCarNumberList();
            });
          }
        },
      });
    },
    toPayPage(carNumber: string) {
      uni.navigateTo({
        url: "/pages/parking/orders?carNumber=" + this.carNumber + "&placeId=" + carNumber
      });
    },
  },
})
</script>
<style lang="scss" scoped>
.list-container {
  width: 100vw;
  height: 100vh;
  background-color: #f0f0f0;
}

.list-container .list {
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.item-container {
  display: flex;
  margin-bottom: 15px;
  padding: 15px;
  background-color: #fff;
  border-radius: 12px;
}

.item-container .title-container {
  flex-grow: 1;
  font-size: 16px;
}

.item-container .action-container {
  font-size: 16px;
  width: 70px;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
}

.item-container .action-container .edit-btn {
  color: #007aff;
  margin-right: 20px;
}

.item-container .action-container .delete-btn {
  color: #dd524d;
}
</style>